@import "./var";
@import "../mixins/mixins";

.t-box {
  font-size: $--input-font-size;
}

.t-input {
  position: relative;
  width: inherit;

  &__inner {
    box-sizing: border-box;

    width: inherit;
    height: $--input-height-base;
    line-height: $--input-line-height-base;
    font-size: inherit;

    margin: 0;
    padding: 0 15px;
    border-radius: $--input-border-radius-base;
    outline: none;

    color: $--input-font-color;
    border: $--input-border;

    transition: $--border-transition-base;

    &:hover {
      border-color: $--input-hover-border;
    }
    &:focus {
      border-color: $--input-focus-border;
    }
    &::placeholder {
      color: $--input-placeholder-color;
    }
  }

  [class^='t-input-position'] {
    position: absolute;
    height: inherit;
    width: $--input-icon-width;
    text-align: center;

    .t-input__icon {
      line-height: $--input-line-height-base;

      &-click {
        cursor: pointer;
      }
    }
  }

  &.is-disabled {
    .t-input__inner {
      @include disabled() {
        border-color: $--input-disabled-border;
        color: $--input-disabled-color;
      }
    }
  }

  &-prefix {
    left: $--input-icon-vertical;
  }

  &-suffix {
    right: $--input-icon-vertical;
  }

  &--prefix {
    .t-input__inner {
      padding-left: $--input-icon-padding;
    }
  }

  &--suffix {
    .t-input__inner {
      padding-right: $--input-icon-padding;
    }
  }
}
